<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage"  show-scrollbar="false" @scrolltolower="loadMore" >

            <view class="tabTop">
                <view class="title"> {{navBarTitle}}</view>
            </view>
            <view class="membersBox">
                <view class="membersList" v-for="(item,index) in membersList" :key="index" >
                    <view class="itemLeft">
                        <view class="joinMemImg">
                            <img :src="item.avatarUrl" alt="">
                            <view class="logo"><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png" alt=""></view>
                        </view>
                        <view class="info">
                            <view class="nickName">{{item.nickName}}</view>
                            <view class="jobTitle">已购{{item.buyNum}}张票</view>
                        </view>
                    </view>
                    <view class="itemRight" @tap="toFollow(item)">
                        <!-- <van-button class="" type="default">关注</van-button> -->
                        <van-button size="mini" class="guanzhu" type="default" >{{item.follow == true? '已关注' : '关注'}}</van-button>
                    </view>
                </view>
                <view v-if="loading" class="loading-text">正在加载...</view>
                <view v-if="finished" class="no-more-text">没有更多了</view>
            </view>

        </scroll-view>
    </view>
</template>

<script>
import {getRegisteredUsersApi,followUserApi} from '@/api/activity'
	export default {
		data() {
			return {
				navBarTitle: '已报名用户',
                scrolling:false,
                membersList:[
                    // {
                    //     avatarUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    //     nickName:'端木逢春',
                    //     buyNum:'1'
                    // },
                    // {
                    //     avatarUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    //     nickName:'端木逢春',
                    //     buyNum:'1'
                    // },
                    // {
                    //     avatarUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                    //     nickname:'端木逢春',
                    //     buyNum:'1'
                    // }
                ],
                pageNum:1,
                pageSize:10,
                total:0,
                hasMore:true,
                isLoading:false,
                finished:false,
                params:undefined //接受从路由传过来的参数
			}
		},
		onLoad(data) {
            if(data&& data.params){
                this.params=JSON.parse(decodeURIComponent(data.params))
                console.log(this.params)
               this.getRegisteredUsers(this.params.activitiesId)
            }
		},
        onReady () {
            this.membersList.forEach(element => {
                this.$set(element,'isChecked',false)
            });
        },
		methods: {
            // 滑动
            scrollPage(e) {
                console.log(e.detail.scrollTop, this.scrolling)
                if (e.detail.scrollTop > 25 && !this.scrolling) {
                    this.scrolling = true
                } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                    this.scrolling = false
                }
            },
            // 返回键
            onClickLeft () {
                uni.navigateBack()
            },
            // 新增加载更多方法
            loadMore() {
                if (!this.finished) {
                    this.getRegisteredUsers();
                }
            },
            // 获取报名用户列表
            getRegisteredUsers(activityId){
                getRegisteredUsersApi(activityId).then(res=>{
                    console.log(res)
                    if(res.code==200){
                        this.membersList=res.data
                    }
                })
            },
            // 关注
            toFollow(item){
                console.log(item)
                followUserApi({targetUid:item.targetUid}).then(res=>{
                    console.log(res)
                    if(res.code==200){
                       
                    }
                })
            }
		}
	}
</script>

<style  lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding-top:25px;
    padding-left: 24px;
    padding-right: 24px;
}
.title{
    font-size: 30px;
    text-align: left;
    color: #111111;
}
.membersBox{
    margin-top: 50rpx;
    padding: 0px 48rpx;
}
.membersList{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;
}
.itemLeft {
    display: flex;
    align-items: center;

    .joinMemImg {
        width: 76rpx;
        height: 76rpx;
        position: relative;
        border-radius: 50%;

        img {
            width: 100%;
            height: 76rpx;
            border-radius: 50%;
        }

        .logo {
            width: 34rpx;
            height: 34rpx;
            position: absolute;
            line-height: 34rpx;
            bottom: 0px;
            right: 0px;
            background-color: #ffffff;
            text-align: center;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 30rpx;
                height: 30rpx;
            }
        }
    }

    .info {
        margin-left: 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .nickName {
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #111111;
        }

        .jobTitle {
            margin-top: 10rpx;
            font-size: 22rpx;
            line-height: 22rpx;
            text-align: left;
            color: #666666;
        }
    }
}
.guanzhu {
    width: 100rpx !important;
    height: 44rpx !important;
    line-height: 44rpx;
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
::v-deep .itemRight .van-button--default {
    // width: 100rpx;
    height: 44rpx;
    border-radius: 22rpx;
    font-size: 22rpx;
    background: transparent !important;
    border: 1px solid #D4D4D4 !important;
    color: #666666 !important;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

</style>
